<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Data Display</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <h1>实时数据展示</h1>
    <div id="all_stock_data">
        <h2>所有上架和下架的数量</h2>
        <p id="all_stock_result"></p>
    </div>
    <div id="goods_quantity_data">
        <h2>各个货品号各自的数量</h2>
        <p id="goods_quantity_result"></p>
    </div>
    <div id="goods_item_quantity_data">
        <h2>各个货品的物品数量</h2>
        <p id="goods_item_quantity_result"></p>
    </div>
    <div id="goods_stock_change_data">
        <h2>各个货品号上架和下架的数量</h2>
        <p id="goods_stock_change_result"></p>
    </div>
    <div id="goods_item_stock_change_data">
        <h2>各个货品号各个物品上架和下架的数量（此处可考虑用饼状图展示，需引入图表库）</h2>
        <p id="goods_item_stock_change_result"></p>
    </div>

    <script>
        // 创建SocketIO连接
        var socket = io.connect('http://127.0.0.1:4656');

        // 连接所有上架和下架数量相关的SocketIO事件
        socket.on('test_message_all_stock', function (data) {
            var result = document.getElementById('all_stock_result');
            result.innerHTML = data.data;
        });
        socket.on('connected_all_stock', function (data) {
            console.log('已连接到所有上架和下架数量数据');
        });
        socket.emit('test_connect_all_stock', {});

        // 连接各个货品号各自数量相关的SocketIO事件
        socket.on('test_message_goods_quantity', function (data) {
            var result = document.getElementById('goods_quantity_result');
            result.innerHTML = data.data;
        });
        socket.on('connected_goods_quantity', function (data) {
            console.log('已连接到各个货品号各自数量数据');
        });
        socket.emit('test_connect_goods_quantity', {});

        // 连接各个货品的物品数量相关的SocketIO事件
        socket.on('test_message_goods_item_quantity', function (data) {
            var result = document.getElementById('goods_item_quantity_result');
            result.innerHTML = data.data;
        });
        socket.on('connected_goods_item_quantity', function (data) {
            console.log('已连接到各个货品的物品数量数据');
        });
        socket.emit('test_connect_goods_item_quantity', {});

        // 连接各个货品号上架和下架数量相关的SocketIO事件
        socket.on('test_message_goods_stock_change', function (data) {
            var result = document.getElementById('goods_stock_change_result');
            result.innerHTML = data.data;
        });
        socket.on('connected_goods_stock_change', function (data) {
            console.log('已连接到各个货品号上架和下架数量数据');
        });
        socket.emit('test_connect_goods_stock_change', {});

        // 连接各个货品号各个物品上架和下架数量相关的SocketIO事件
        socket.on('test_message_goods_item_stock_change', function (data) {
            var result = document.getElementById('goods_item_stock_change_result');
            result.innerHTML = data.data;
        });
        socket.on('connected_goods_item_stock_change', function (data) {
            console.log('已连接到各个货品号各个物品上架和下架数量数据');
        });
        socket.emit('test_connect_goods_item_stock_change', {});
    </script>
</body>

</html>